<template>
  <div class="content">
    <div class="aqjdDiv">
      <TitleVue :name="'安全监督'" />
      <div class="aqjdContent">
        <div id="treeDiv"></div>
      </div>
    </div>

    <div class="sjcjDiv">
      <TitleVue :name="'数据采集状态'" />
      <div class="sjcjContent">
        <div class="itemDiv" v-for="(item, index) in sjcjList" :key="index">
          <img :src="require('@/assets/img/common/' + item.name + '.png')" alt="" />
          <div class="rightDiv">
            <p>{{ item.name }}</p>
            <p>
              {{ item.zxVal }}/{{ item.val }}<span>{{ item.unit }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="zcbaDiv">
      <TitleVue :name="'注册备案'" />
      <div class="zcbaContent">
        <p>水库名称：{{ skmc }}</p>
        <p>所在地点：{{ szdd }}</p>
        <p>主要功能：{{ zygn }}</p>
        <p>工程规模：{{ gcgm }}</p>
        <p>水库主管部门：{{ skzgbm }}</p>
        <p>管理单位名称：{{ gldwmc }}</p>
        <p>所属行业部门：{{ sshybm }}</p>
        <div class="bottomDiv">
          <p>注册登记机构：{{ zcdjjg }}</p>
          <p>发证日期：{{ fzrq }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import { Graph } from '@antv/x6'

export default {
  name: 'QfgLeft',
  components: {
    TitleVue
  },
  data() {
    return {
      skmc: '蔡庄水库',
      szdd: '山西省晋中市寿阳县南燕竹镇',
      zygn: '防洪，灌溉，养殖',
      gcgm: '中型',
      skzgbm: '寿阳县水利局',
      gldwmc: '寿阳县水库事务服务中心',
      sshybm: '水利部门',
      zcdjjg: '晋中市水利局',
      fzrq: '2023年11月1日',
      graph: null,
      treeData: [
        {
          id: 1,
          label: '指挥长',
          children: [
            {
              id: 10,
              label: '水利部门',
              indexY: -115,
              children: [
                {
                  id: 11,
                  label: '水利部',
                  indexY: -150
                },
                {
                  id: 12,
                  label: '省水利厅',
                  indexY: -115
                },
                {
                  id: 13,
                  label: '市水利局',
                  indexY: -80
                },
                {
                  id: 14,
                  label: '县水利局',
                  indexY: -45
                }
              ]
            },
            {
              id: 100,
              label: '流域机构',
              indexY: -50
            },
            {
              id: 1000,
              label: '职能部门',
              indexY: 45,
              children: [
                {
                  id: 1001,
                  label: '生态环境部门',
                  indexY: -5
                },
                {
                  id: 1002,
                  label: '自然资源部门',
                  indexY: 30
                },
                {
                  id: 1003,
                  label: '应急管理部门',
                  indexY: 65
                },
                {
                  id: 1004,
                  label: '农业农村部门',
                  indexY: 100
                }
              ]
            },
            {
              id: 10000,
              label: '专项监管',
              indexY: 160,
              children: [
                {
                  id: 10001,
                  label: '大坝安全鉴定机构',
                  indexY: 140
                },
                {
                  id: 10002,
                  label: '水文监测机构',
                  indexY: 175
                }
              ]
            }
          ]
        }
      ],
      sjcjList: [
        {
          name: '水位计',
          val: 1,
          zxVal: 1,
          unit: '个'
        },
        {
          name: '雨量站',
          val: 1,
          zxVal: 1,
          unit: '个'
        },
        {
          name: '视频站',
          val: 6,
          zxVal: 5,
          unit: '个'
        },
        {
          name: '流量站',
          val: 1,
          zxVal: 1,
          unit: '个'
        },
        {
          name: '渗压计',
          val: 3,
          zxVal: 3,
          unit: '个'
        },
        {
          name: 'GNSS',
          val: 5,
          zxVal: 4,
          unit: '个'
        }
      ]
    }
  },
  mounted() {
    this.renderTree()
  },
  methods: {
    renderTree() {
      var graphDatas = []
      var x = 0
      var y = 0
      this.treeData.forEach((item, index) => {
        graphDatas.push({
          id: item.id,
          shape: 'firstRect',
          width: 30,
          height: 90,
          position: {
            x: x,
            y: y
          },
          label: item.label
        })
        item.children.forEach((ite, ind) => {
          graphDatas.push({
            id: ite.id,
            shape: 'itemRect',
            width: 100,
            height: 30,
            position: {
              x: x + 120,
              y: ite.indexY
            },
            label: ite.label
          })
          graphDatas.push({
            id: 100000 + ind * 10,
            shape: 'connectLine',
            source: item.id,
            target: ite.id,
            vertices: [
              { x: x + 90, y: y },
              { x: x + 90, y: ite.indexY + 15 }
            ]
          })

          if (ite.children) {
            ite.children.forEach((ites, inds) => {
              graphDatas.push({
                id: ites.id,
                shape: 'itemRect2',
                width: 120,
                height: 30,
                position: {
                  x: x + 300,
                  y: ites.indexY
                },
                label: ites.label
              })
              graphDatas.push({
                id: 1000000 + ind * 100 + inds * 10,
                shape: 'connectLine',
                source: ite.id,
                target: ites.id,
                vertices: [
                  { x: x + 275, y: ite.indexY },
                  { x: x + 275, y: ites.indexY + 15 }
                ]
              })
            })
          }
        })
      })
      this.graphDatas = graphDatas

      Graph.registerNode(
        'firstRect',
        {
          inherit: 'rect',
          markup: [
            {
              tagName: 'rect',
              selector: 'body'
            },
            {
              tagName: 'text',
              selector: 'label'
            }
          ],
          attrs: {
            body: {
              stroke: '#8693DB',
              fill: '#194581',
              strokeWidth: 1,
              class: 'shadow'
            },
            label: {
              fontSize: 16,
              fill: '#fff',
              fontFamily: 'YouSheBiaoTiHei',
              writingMode: 'tb',
              textAnchor: 'middle'
            }
          }
        },
        true
      )

      Graph.registerNode(
        'itemRect',
        {
          inherit: 'rect',
          markup: [
            {
              tagName: 'rect',
              selector: 'body'
            },
            {
              tagName: 'text',
              selector: 'label'
            }
          ],
          attrs: {
            body: {
              rx: 15,
              ry: 15,
              stroke: '#8693DB',
              fill: '#194581',
              strokeWidth: 1,
              class: 'shadow'
            },
            label: {
              fontSize: 16,
              fill: '#fff',
              fontFamily: 'YouSheBiaoTiHei'
            }
          }
        },
        true
      )

      const male = require('@/assets/img/common/thirdBg.png')
      Graph.registerNode(
        'itemRect2',
        {
          inherit: 'rect',
          markup: [
            {
              tagName: 'image',
              selector: 'avatar'
            },
            {
              tagName: 'text',
              selector: 'label'
            }
          ],
          attrs: {
            avatar: {
              'xlink:href': male,
              width: 100,
              height: 30
            },
            label: {
              refX: 10,
              fontSize: 16,
              fill: '#fff',
              fontFamily: 'YouSheBiaoTiHei',
              textAnchor: 'start', // 文本靠左对齐
              textVerticalAnchor: 'middle' // 文本垂直居中对齐
            }
          }
        },
        true
      )

      Graph.registerEdge(
        'connectLine',
        {
          inherit: 'edge',
          attrs: {
            line: {
              stroke: '#0C4DF5',
              strokeWidth: 2,
              targetMarker: null
            }
          }
        },
        true
      )

      this.graph = new Graph({
        container: document.getElementById('treeDiv'),
        width: '100%',
        height: '100%',
        scroller: {
          enabled: true,
          pannable: true,
          pageVisible: true,
          pageBreak: false
        },
        autoResize: true,
        panning: {
          enabled: false
        },
        connecting: {
          router: 'orth',
          sourceAnchor: {
            name: 'right', // 锚点会在节点右侧中心往上偏移 10px
            args: {
              dy: 0
            }
          },
          targetAnchor: {
            name: 'left', // 锚点会在节点右侧中心往上偏移 10px
            args: {
              dy: 0
            }
          },
          connectionPoint: 'anchor'
        },
        interacting: function (cellView) {
          if (cellView.cell) {
            return { nodeMovable: false }
          }
          return true
        }
      })
      const cells = []
      this.graphDatas.forEach((item) => {
        if (item.shape === 'connectLine') {
          cells.push(this.graph.createEdge(item))
        } else {
          cells.push(this.graph.createNode(item))
        }
      })
      this.graph.resetCells(cells)
      this.graph.centerContent()
      // this.graph.render()
      // 使用fitView方法，并尝试通过其他方式调整居中效果
      this.graph.fitView()
      this.graph.zoomToFit({ padding: 10, maxScale: 1 })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .aqjdDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .aqjdContent {
      width: 100%;
      height: 38vh;
      #treeDiv {
        width: 100%;
        height: 100%;
      }
    }
  }
  .sjcjDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px 0.8vh;
    box-sizing: border-box;
    margin-bottom: 8px;
    .sjcjContent {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .itemDiv {
        width: 33%;
        display: flex;
        // margin-bottom: 5px;
        img {
          width: 42%;
        }
        .rightDiv {
          flex: 1;
          margin-left: 5px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          font-size: 2.2vh;
          color: #ffffff;
          p:nth-child(1) {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
            background: linear-gradient(to right, #0565a7, transparent);
          }
          p:nth-child(2) {
            span {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 1.7vh;
            }
          }
        }
      }
    }
  }
  .zcbaDiv::-webkit-scrollbar {
    display: none;
  }
  .zcbaDiv {
    flex: 1;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .zcbaContent {
      flex: 1;
      overflow-y: auto;
      padding: 1vh 5px 0 3vh;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      font-family: Source Han Sans CN;
      font-size: 1.5vh;
      color: #ffffff;
      position: relative;
      .bottomDiv {
        font-size: 1.3vh;
        position: absolute;
        bottom: 10px;
        right: 10px;
      }
    }
  }
}
</style>
